import 'package:flutter/material.dart';

class UserPage extends StatefulWidget {
  const UserPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _UserPageState();
  }
}

class _UserPageState extends State<UserPage> {
  // 昵称
  String nickname = '游客114515';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '我的',
          style: TextStyle(
            fontSize: 20,
            color: const Color.fromARGB(255, 0, 0, 0),
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          // 用户信息窗口
          Container(
            width: MediaQuery.of(context).size.width,
            height: 200,
            color: Colors.blue,
            // 子组件居中
            alignment: Alignment.center,
            // 引入头像组件
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 头像组件
                _buildAvatar(),
                // 占位
                const SizedBox(height: 10),
                // 昵称
                Text(
                  nickname,
                  style: TextStyle(
                    fontSize: 25,
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),

          // 功能栏
          _buildToolBar(),

          // 工具栏
          _buildFunctionBar(),
        ],
      ),
    );
  }

  // 头像组件
  Widget _buildAvatar() {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: const Color.fromARGB(255, 0, 0, 0),
        image: const DecorationImage(
          image: NetworkImage(
            'https://img2.baidu.com/it/u=3279829689,911952698&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          ),
          fit: BoxFit.contain,
        ),
      ),
    );
  }

  // 工具栏
  Widget _buildToolBar() {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 50,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [],
      ),
    );
  }

  // 功能栏
  Widget _buildFunctionBar() {
    return Container(
      width: MediaQuery.of(context).size.width,
      padding: EdgeInsets.symmetric(vertical: 12), // 增加纵向间距
      child: Column(
        // 水平排列
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          // 关于我们
          _buildFunctionItem(
            // 水平排列
            icon: Icons.info_outline,
            title: '关于我们',
            onTap: () {
              // 弹出消息框
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('关于我们'),
                    content: Text('这个没有功能捏。'),
                    actions: [],
                  );
                },
              );
            },
          ),
          // 退出登录
          _buildFunctionItem(
            icon: Icons.logout,
            title: '退出登录',
            onTap: () {
              // 弹出消息框
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('退出登录'),
                    content: Text('没有功能捏。'),
                  );
                },
              );
            },
          ),
        ],
      ),
    );
  }

  // 功能项组件
  Widget _buildFunctionItem({
    required IconData icon,
    required String title,
    required Function() onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: MediaQuery.of(context).size.width,
        // 增加点击区域
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        // 增加间隔线条
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Colors.grey[300]!, // 设置间隔线条颜色
              width: 1.0, // 设置间隔线条宽度
            ),
          ),
        ),
        child: Row(
          // 自适应内容宽度
          mainAxisSize: MainAxisSize.min,
          children: [
            // 直接使用Icon组件
            Icon(icon, size: 24),
            // 添加间距
            SizedBox(width: 15),
            Text(
              title,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ),
    );
  }
}
